<template>
  <div id="main" style="width: 1250px;height:560px;"></div>
</template>

<script>
export default {
  name: "barChart",
  methods:{
    myEcharts(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      let option = {
        title : {
          text: '西安市最近10年GDP增长图',
          subtext: '来源：国家统计局'
        },
        color: ['#de244c'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['2010', '2011', '2012', '2013', '2014', '2015', '2016','2017','2018','2019'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'GDP',
            type: 'bar',
            barWidth: '60%',
            data: [3241.50, 3864.21, 4366.10, 4884.13, 5492.64, 5801.20, 6257.18,7469.85,8349.86,9321.00]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.myEcharts();
  }
}
</script>

<style scoped>

</style>
